<template>
  <div>
    <a-card title="本周变更来源分类" :bordered="false" :headStyle="{ padding: '0 15px', border:0 }" style="width:100%">
        <rose-type-chart id="roseType" :opiton="optionRoseType" style="width:100%; height:160px"></rose-type-chart>
    </a-card>
  </div>
</template>

<script>
// import { getMcaCount } from '@/api/performance'
import moment from 'moment'
import roseTypeChart from './roseTypeChart'
export default {
  name: 'TodaySheet',
  components: {
    roseTypeChart
  },
  data () {
    return {
      optionRoseType: {
        tooltip: {
            trigger: 'item',
            formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        calculable: true,
        series: [
          {
              name: '来源分类',
              type: 'pie',
              radius: [20, 70],
              center: ['50%', '50%'],
              roseType: 'area',
              data: [
                { value: 10, name: '信息安全' },
                { value: 5, name: '投诉处理' },
                { value: 15, name: '故障处理' },
                { value: 25, name: '服务请求' }
              ],
              itemStyle: {  
                normal: {
                  label: {  
                    show: true,  
                    formatter: '{b}\n{c} '  
                  },
                  labelLine: { show: true }
                },  
                emphasis: {  
                  label: {  
                    show: true,  
                    formatter: '{b}\n{c} ',  
                    position: 'center',  
                    textStyle: {  
                      fontSize: '12'
                    }  
                  }  
                }  
              } 
          }
        ]
      }
    }
  },
  created () {
  },
  mounted () {
    // 轮询接口
    const timers = window.setInterval(() => {
      setTimeout(res => {
      }, 0)// 利用定时器清除setInterval的每次叠加
    }, 60000)// 1分钟执行一次
    // this.once在离开当前路由时销毁定时器
    this.$once('hook:beforeDestroy', () => {
      clearInterval(timers)
    })
  },
  /**
   * 数字格式化为千分位
   */
  filters: {
    format: function (value) {
      return value.toLocaleString()
    }
  },
  methods: {
    /**
     * 告警类型信息汇总
     */
    getAlarmTypeData () {
      // 生产当月的开始日期
      const startDate = new Date(moment(new Date()).format('YYYY-MM-DD 00:00:00')).getTime()
      const endDate = new Date(moment(new Date()).format('YYYY-MM-DD 23:59:59')).getTime()
      for (let i = 0; i < 5; i += 1) {
        this.alarmTypeData.rows.push({
          '日期': moment(this.randomDate(startDate, endDate)).format('YYYY-MM-DD HH:mm:ss'),
          '紧急告警': Math.floor(Math.random() * 10), // 输出0～10之间的随机数
          '主要告警': Math.floor(Math.random() * 100), // 输出0～100之间的随机数
          '次要告警': Math.floor(Math.random() * 100), // 输出0～100之间的随机数
          '警告告警': Math.floor(Math.random() * 100) // 输出0～100之间的随机数
        })
      }
      this.alarmTypeData.rows.sort(function (a, b) {
        return Date.parse(a[ '日期' ]) - Date.parse(b[ '日期' ]) // 时间正序
      })
    },
    /**
     * 生成指定时间段的随机时间
     */
    randomDate (startDate, endDate) {
      const date = new Date(+startDate + Math.random() * (endDate - startDate))
      const hour = 0 + Math.random() * (23 - 0) | 0
      const minute = 0 + Math.random() * (59 - 0) | 0
      const second = 0 + Math.random() * (59 - 0) | 0
      date.setHours(hour)
      date.setMinutes(minute)
      date.setSeconds(second)
      return date
    }
  }
}
</script>
<style lang="less" scoped>
  .ant-card{
    /deep/.ant-card-body{
      padding:0 15px 15px 15px;
    }
  }
</style>
